let l2 = 0;
let l3 = 0;
let l4 = 1;
let data;
let pai = true;
let jijie;
// 点位
(function () {
  var myechart = echarts.init($(".pie")[0]);
  ccc = {
    // 控制提示
    tooltip: {
      // 非轴图形，使用item的意思是放到数据对应图形上触发提示
      trigger: "item",
      // 格式化提示内容：
      // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    // 控制图表
    series: [
      {
        // 图表名称
        name: "地区",
        // 图表类型
        type: "pie",
        // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
        // 百分比基于  图表DOM容器的半径
        radius: ["10%", "70%"],
        // 图表中心位置 left 50%  top 50% 距离图表DOM容器
        center: ["50%", "50%"],
        // 半径模式，另外一种是 area 面积模式
        roseType: "radius",
        // 数据集 value 数据的值 name 数据的名称
        data: [
          { value: 20, name: "云南" },
          { value: 5, name: "北京" },
          { value: 15, name: "山东" },
          { value: 25, name: "河北" },
          { value: 20, name: "江苏" },
          { value: 35, name: "浙江" },
          { value: 30, name: "四川" },
          { value: 40, name: "湖北" },
        ],
        //文字调整
        label: {
          fontSize: 10,
        },
        //引导线
        labelLine: {
          length: 8,
          length2: 10,
        },
      },
    ],
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff",
    ],
  };
  myechart.setOption(ccc);
})();
// 用户
(function () {
  // 中间省略的数据  准备三项
  var item = {
    name: "",
    value: 1200,
    // 柱子颜色
    itemStyle: {
      color: "#254065",
    },
    // 鼠标经过柱子颜色
    emphasis: {
      itemStyle: {
        color: "#254065",
      },
    },
    // 工具提示隐藏
    tooltip: {
      extraCssText: "opacity:0",
    },
  };
  user = {
    // 工具提示
    tooltip: {
      // 触发类型  经过轴触发axis  经过轴触发item
      trigger: "item",
      // 轴触发提示才有效
      axisPointer: {
        // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
        type: "shadow",
      },
    },
    // 图表边界控制
    grid: {
      // 距离 上右下左 的距离
      left: "0",
      right: "3%",
      bottom: "3%",
      top: "5%",
      // 大小是否包含文本【类似于boxsizing】
      containLabel: true,
      //显示边框
      show: true,
      //边框颜色
      borderColor: "rgba(0, 240, 255, 0.3)",
    },
    // 控制x轴
    xAxis: [
      {
        // 使用类目，必须有data属性
        type: "category",
        // 使用 data 中的数据设为刻度文字
        data: [
          "上海",
          "广州",
          "北京",
          "深圳",
          "合肥",
          "",
          "......",
          "",
          "杭州",
          "厦门",
          "济南",
          "成都",
          "重庆",
        ],
        // 刻度设置
        axisTick: {
          // true意思：图形在刻度中间
          // false意思：图形在刻度之间
          alignWithLabel: false,
          show: false,
        },
        //文字
        axisLabel: {
          color: "#4c9bfd",
        },
      },
    ],
    // 控制y轴
    yAxis: [
      {
        // 使用数据的值设为刻度文字
        type: "value",
        axisTick: {
          // true意思：图形在刻度中间
          // false意思：图形在刻度之间
          alignWithLabel: false,
          show: false,
        },
        //文字
        axisLabel: {
          color: "#4c9bfd",
        },
        splitLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)",
          },
        },
      },
    ],
    // 控制x轴
    series: [
      {
        // series配置
        // 颜色
        itemStyle: {
          // 提供的工具函数生成渐变颜色
          color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "#00fffb" }, // 0 起始颜色
              { offset: 1, color: "#0061ce" }, // 1 结束颜色
            ]
          ),
        },
        // 图表数据名称
        name: "用户统计",
        // 图表类型
        type: "bar",
        // 柱子宽度
        barWidth: "60%",
        // 数据
        data: [
          2100,
          1900,
          1700,
          1560,
          1400,
          item,
          item,
          item,
          900,
          750,
          600,
          480,
          240,
        ],
      },
    ],
  };
  var myechart = echarts.init($(".users .bar")[0]);
  myechart.setOption(user);
})();
// 销售
(function () {
  var option = {
    series: [
      {
        type: "pie",
        radius: ["130%", "150%"], // 放大图形
        center: ["50%", "80%"], // 往下移动  套住75%文字
        label: {
          show: false,
        },
        startAngle: 180,
        hoverOffset: 0, // 鼠标经过不变大
        data: [
          {
            value: 100,
            itemStyle: {
              // 颜色渐变#00c9e0->#005fc1
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#00c9e0" },
                  { offset: 1, color: "#005fc1" },
                ],
              },
            },
          },
          { value: 100, itemStyle: { color: "#12274d" } }, // 颜色#12274d

          { value: 200, itemStyle: { color: "transparent" } }, // 透明隐藏第三块区域
        ],
      },
    ],
  };
  var myechart = echarts.init($(".gauge")[0]);
  myechart.setOption(option);
})();
// 年,季,月,周
function year() {
  return new Promise((resolve, reject) => {
    if (pai) {
      let l = data.year[0];
      let l1 = data.year[1];
      var abc = {
        //鼠标提示工具
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          // 类目类型
          type: "category",
          // x轴刻度文字
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisTick: {
            show: false, //去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd", //文本颜色
          },
          axisLine: {
            show: false, //去除轴线
          },
          boundaryGap: false, //去除轴内间距
        },
        yAxis: {
          // 数据作为刻度文字
          type: "value",
          axisTick: {
            show: false, //去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd", //文本颜色
          },
          axisLine: {
            show: false, //去除轴线
          },
          boundaryGap: false, //去除轴内间距
        },
        //图例组件
        legend: {
          textStyle: {
            color: "#4c9bfd", // 图例文字颜色
          },
          top: "10",
          right: "80", //距离右边10%
        },
        // 设置网格样式
        grid: {
          show: true, // 显示边框
          top: "20%",
          left: "3%",
          right: "10%",
          bottom: "3%",
          borderColor: "#012f4a", // 边框颜色
          containLabel: true, // 包含刻度文字在内
        },
        series: [
          {
            name: "预期销售额",
            // 数据
            data: l,
            // 图表类型
            type: "line",
            // 圆滑连接
            smooth: true,
            itemStyle: {
              color: "#00f2f1", // 线颜色
            },
          },
          {
            name: "实际销售额",
            // 数据
            data: l1,
            // 图表类型
            type: "line",
            // 圆滑连接
            smooth: true,
            itemStyle: {
              color: "#ed3f35", // 线颜色
            },
          },
        ],
      };
      var myechart = echarts.init($(".line .lb")[0]);
      myechart.setOption(abc);
      resolve(abc.series, data);
    } else {
      reject();
    }
  });
}
// 获取axios
function huoq(jijie) {
  axios.get(`http://localhost:3000/xioasho?jijie=${jijie}`).then((sre) => {
    data = sre.data[0];
    year();
  });
}
//销售效果
function xiaosho() {
  let index12 = 1;
  setInterval(() => {
    jijie = lb[index12].dataset.jijie;
    lb[index12].classList.add("active");
    index12++;
    huoq(jijie);
    if (index12 === 4) {
      index12 = 0;
    }
    year();
  }, 2500);
}
// 销售切换
function huan() {
  lb.forEach((itam, www) => {
    itam.onclick = function () {
      for (let i = 0; i < lb.length; i++) {
        lb[i].classList.remove("active");
      }
      lb[www].classList.add("active");
      jijie = itam.dataset.jijie;
      huoq(jijie);
      year();
    };
  });
}
// 初始化
async function init2() {
  huoq("n");
  xiaosho();
  huan();
}
init2();